﻿/**
 * 标题栏类的构造方法。
 * @param parent    父窗口
 * @param width     宽度
 * @param height    高度
 * @param title     标题
 */
function TitleBar(parent, width, height, title) {
    var mMoveing = false    // 移动标志
    var mPreviousX = 0      // 移动中上一个点的X坐标
    var mPreviousY = 0      // 移动中上一个点的Y坐标

    const titleBar = document.createElement("div")  // 标题栏

    // 设置标题栏
    titleBar.style.fontSize = "12px"
    titleBar.style.lineHeight = height + "px"
    titleBar.innerHTML = "&nbsp" + title
    titleBar.style.border = "1px solid gray"
    titleBar.style.background = "-webkit-linear-gradient(bottom, white, lightYellow)"
    titleBar.style.position = "absolute"
    titleBar.style.left = "-1px"
    titleBar.style.top = "-1px"
    titleBar.style.width = width + "px"
    titleBar.style.height = height + "px"
    parent.appendChild(titleBar)

    // 设置关闭按钮
    const margin = 3
    var buttonX_height = height - margin * 2
    var buttonX_width = buttonX_height
    const buttonX = document.createElement("button")
    buttonX.onclick = function() {
        parent.style.display = "none"
    }
    buttonX.style.background = "-webkit-linear-gradient(bottom, white, lightYellow)"
    buttonX.style.position = "absolute"
    buttonX.style.width = buttonX_width + "px"
    buttonX.style.height = buttonX_height + "px"
    buttonX.style.left = width - buttonX_width - margin * 2 + "px"
    buttonX.style.top = margin + "px"
    buttonX.style.padding = "0px"
    buttonX.style.display = "block"
    buttonX.innerHTML = "❌"
    parent.appendChild(buttonX)

    /**
     * 鼠标指针按下事件的响应方法。
     * @param e 事件相关信息
     */
    titleBar.onpointerdown = function(e) {
        titleBar.setPointerCapture(e.pointerId)
    }

    /**
     * 鼠标指针抬起事件的响应方法。
     * @param e 事件相关信息
     */
    titleBar.onpointerup = function(e) {
        titleBar.releasePointerCapture(e.pointerId)
    }

    /**
     * 鼠标左键按下事件的响应方法。
     * @param e 事件相关信息
     */
    titleBar.onmousedown = function(e) {
        mMoveing = true
        mPreviousX = e.x
        mPreviousY = e.y
    }

    /**
     * 鼠标移动事件的响应方法。
     * @param e 事件相关信息
     */
    titleBar.onmousemove = function(e) {
        if (mMoveing) {
            parent.x += (e.x - mPreviousX)
            parent.y += (e.y - mPreviousY)
            parent.style.left = parent.x + "px"
            parent.style.top = parent.y + "px"
            mPreviousX = e.x
            mPreviousY = e.y
        }
    }

    /**
     * 鼠标左键抬起事件的响应方法。
     * @param e 事件相关信息
     */
    titleBar.onmouseup = function(e) {
        mMoveing = false
    }

    /**
     * 鼠标离开事件的响应方法。
     * @param e 事件相关信息
     */
    titleBar.onmouseout = function(e) {
        mMoveing = false
    }

    return titleBar
}

/**
 * 对手列表窗口类的构造方法。
 * @param parent    父窗口
 */
function RivalWindow(parent) {
    const mDialog = document.createElement("div")                   // 对话框
    const mGetRivalNameEvent = document.createEvent("customEvent")  // 获取对手的名字事件
    const mListViewUsers = document.createElement("select")         // 用户列表

    // 对话框
    mDialog.style.position = "absolute"
    mDialog.style.width = Const.RIVAL_WINDOW_WIDTH + "px"
    mDialog.style.height = Const.RIVAL_WINDOW_HEIGHT + "px"
    mDialog.x = (parent.clientWidth - Const.RIVAL_WINDOW_WIDTH) / 2
    mDialog.y = (parent.clientHeight - Const.RIVAL_WINDOW_HEIGHT) / 2
    mDialog.style.left = mDialog.x + "px"
    mDialog.style.top = mDialog.y + "px"
    mDialog.style.background = Const.RIVAL_WINDOW_BACKGROUND_COLOR
    mDialog.style.border = "1px solid gray"
    mDialog.style.display = "none"
    parent.appendChild(mDialog)

    // 标题栏
    new TitleBar(mDialog, Const.RIVAL_WINDOW_WIDTH, Const.RIVAL_WINDOW_TITLE_BAR_HEIGHT, IDS_RIVAL_LIST[LANG])

    // 对手列表
    mListViewUsers.style.position = "absolute"
    mListViewUsers.style.width = (Const.RIVAL_WINDOW_WIDTH - Const.RIVAL_WINDOW_USER_LIST_X * 2) + "px"
    mListViewUsers.style.height = Const.RIVAL_WINDOW_USER_LIST_HEIGHT + "px"
    mListViewUsers.style.left = Const.RIVAL_WINDOW_USER_LIST_X + "px"
    mListViewUsers.style.top = Const.RIVAL_WINDOW_USER_LIST_Y + "px"
    mListViewUsers.style.display = "block"
    mDialog.appendChild(mListViewUsers)

    // 取消按钮
    const buttonCancel = document.createElement("button")
    buttonCancel.style.position = "absolute"
    buttonCancel.style.width = Const.RIVAL_WINDOW_BUTTON_WIDTH + "px"
    buttonCancel.style.height = Const.RIVAL_WINDOW_BUTTON_HEIGHT + "px"
    buttonCancel.style.left = Const.RIVAL_WINDOW_BUTTONCANCEL_X + "px"
    buttonCancel.style.top = Const.RIVAL_WINDOW_BUTTONCANCEL_Y + "px"
    buttonCancel.style.display = "block"
    buttonCancel.innerHTML = IDS_CANCEL[LANG]
    buttonCancel.onclick = onCancel
    mDialog.appendChild(buttonCancel)

    // 确定按钮
    const buttonOK = document.createElement("button")
    buttonOK.style.position = "absolute"
    buttonOK.style.width = Const.RIVAL_WINDOW_BUTTON_WIDTH + "px"
    buttonOK.style.height = Const.RIVAL_WINDOW_BUTTON_HEIGHT + "px"
    buttonOK.style.left = Const.RIVAL_WINDOW_BUTTONOK_X + "px"
    buttonOK.style.top = Const.RIVAL_WINDOW_BUTTONOK_Y + "px"
    buttonOK.style.display = "block"
    buttonOK.innerHTML = IDS_OK[LANG]
    buttonOK.onclick = onOK
    mDialog.appendChild(buttonOK)

    // 初始化事件
    mGetRivalNameEvent.initEvent(Const.UM_GET_RIVAL_NAME, false, false)

    /**
     * 隐藏自身。
     */
    this.hide = function() {
        mDialog.style.display = "none"
    }

    /**
     * "取消"按钮的单击响应方法。
     */
    function onCancel() {
        // 关闭窗口
        mDialog.style.display = "none"
    }

    /**
     * "确定"按钮的单击响应方法。
     */
    function onOK() {
        // 获取用户选择的名字
        if (mListViewUsers.selectedIndex == -1) {
            return
        }
        mGetRivalNameEvent.arg1 = mListViewUsers.options[mListViewUsers.selectedIndex].text
        document.dispatchEvent(mGetRivalNameEvent)
        
        // 关闭窗口
        mDialog.style.display = "none"
    }

    /**
     * 设置用户名列表。
     * @param usernameList  用户名列表
     */
    this.setUsernameList = function(usernameList) {
        for (var i = 0; i < mListViewUsers.options.length; i++) {
            mListViewUsers.remove(i)
        }
        for (var i = 0; i < usernameList.length; i++) {
            mListViewUsers.options[i] = new Option(usernameList[i]) 
        }
    }

    /**
     * 显示。
     */
    this.show = function() {
        mDialog.style.display = "block"
    }
}
